.flex {
  display: flex;

  &-column {
    flex-direction: column;
  }

  &-row {
    flex-direction: row;
  }

  &-wrap {
    flex-wrap: wrap;
  }

  &-nowrap {
    flex-wrap: nowrap;
  }

  &-jfy-cont {
    &-center {
      justify-content: center;
    }

    &-start {
      justify-content: flex-start;
    }
  }

  &-align-item {
    &-center {
      align-items: center;
    }
  }
}

// 内边距
@for $i from 1 through 8 {
  .pd-#{$i*5} {
    padding: 5px * $i;
  }

  @media screen and (max-width: 800px) {
    .pd-#{$i*5} {
      padding: 2px * $i;
    }
  }
}

@for $i from 1 through 8 {
  .pd-t-#{$i*5} {
    padding-top: 5px * $i;
  }
}

@for $i from 1 through 8 {
  .pd-b-#{$i*5} {
    padding-bottom: 5px * $i;
  }
}

@for $i from 1 through 8 {
  .pd-r-#{$i*5} {
    padding-right: 5px * $i;
  }
}

@for $i from 1 through 8 {
  .pd-l-#{$i*5} {
    padding-left: 5px * $i;
  }
}


// 外边距
@for $i from 1 through 8 {
  .ma-#{$i*5} {
    margin: 5px * $i;
  }
}

@for $i from 1 through 8 {
  .mb-#{$i*5} {
    margin-bottom: 5px * $i;
  }
}

@for $i from 1 through 8 {
  .mt-#{$i*5} {
    margin-top: 5px * $i;
  }
}

@for $i from 1 through 8 {
  .mr-#{$i*5} {
    margin-right: 5px * $i;
  }
}

@for $i from 1 through 8 {
  .ml-#{$i*5} {
    margin-left: 5px * $i;
  }
}

// 宽度
@for $i from 1 through 10 {
  .width-percent-#{$i*10} {
    width: 10% * $i;
  }
}

@for $i from 1 through 10 {
  @media screen and (max-width: 1000px) {
     .width-#{$i*100}{
       width: 54px * $i !important;
     }
  }

  .width-#{$i*100} {
    width: 100px * $i;
  }
}

// 高度
@for $i from 1 through 10 {
  .height-per-#{$i*10} {
    height: 10% * $i;
  }
}

@for $i from 1 through 10 {
  .height-#{$i*10}vh {
    height: 10vh * $i;
  }
}


@for $i from 1 through 100 {
  .height-#{$i*10} {
    height: 10px * $i;
  }
}


